<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>新增站点（站点列表）</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link
      rel="stylesheet"
      href="../lib/layui-v2.5.5/css/layui.css"
      media="all"
    />
    <link rel="stylesheet" href="../css/public.css" media="all" />
  </head>
  <style>
    .layui-table-grid-down {
      display: none;
    }
    .layui-btn-red {
      background-color: red;
    }
    .layui-btn-Tangerine {
      background-color: chocolate;
    }
  </style>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <!-- <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">设备名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">设备编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="sex" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">网关编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="city" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit  lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset> -->
        <div id="Myloading">
          <img
            src="../lib/layui-v2.5.5/css/modules/layer/default/loading-01.gif"
            alt=""
          />
        </div>
        <script type="text/html" id="toolbarDemo">
          <div style="color:#666; position: absolute;margin-left: 7%;">
            当前站点列表
          </div>
          <div class="layui-btn-container">
            <!-- <button class="layui-btn layui-btn-sm data-add-btn"  layuimini-content-href="./page/test.html"> 当前站点列表 </button> -->
            <button
              class="layui-btn layui-btn-sm"
              lay-event="add_station"
              i18n="fl"
            >
              新增站点
            </button>
            <!-- <button type="button" style="font-size:.6rem;" class="layui-btn layui-btn-primary layui-btn-xs language">中文/English</button> -->
          </div>
        </script>

        <table
          class="layui-hide"
          id="HcurrentTableId"
          lay-filter="currentTableFilter"
        ></table>

        <script type="text/html" id="currentTableBar">
          <a
            class="layui-btn layui-btn-xs data-count-edit"
            data-title="设备列表"
            lay-event="edit"
            >设备</a
          >
          <a
            class="layui-btn layui-btn-xs data-count-edit layui-btn-danger"
            data-title="报警事项"
            layuimini-content-href="page/table/HalarmList.html"
            lay-event="delete"
            >报警</a
          >
          <!-- <a class="layui-btn layui-btn-xs data-count-edit layui-btn-danger"   data-title="报警事项" layuimini-content-href="page/report/check_report.html" lay-event="delete">跳转</a> -->
          <a
            class="layui-btn layui-btn-xs data-count-edit layui-btn-Tangerine"
            lay-event="rename_station"
            >重命名</a
          >
          <a
            class="layui-btn layui-btn-xs data-count-edit layui-btn-red"
            lay-event="delete_station"
            >删除</a
          >
        </script>
      </div>
    </div>
    <script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script
      src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"
      charset="utf-8"
    ></script>
    <script src="../js/dist/i18n.js" charset="utf-8"></script>
    <script>
      /*切换中英文 - 按钮*/
      //   var cnBtn = document.querySelector(".language");
      //     cnBtn.addEventListener('click', function() {

      //             i18n("[i18n]", {
      // 			lang: "en",// 变更语言
      // 			filePath: "./i18n/",
      // 			get: true
      //         });

      //     },false)
      layui.use(["form", "table", "miniTab"], function () {
        // 2020-03-25 HF 保存token
        var token = sessionStorage.getItem("newtoken");

        var $ = layui.jquery,
          form = layui.form,
          miniTab = layui.miniTab,
          table = layui.table;
        miniTab.listen();

        table.render({
          elem: "#HcurrentTableId",
          url: "/oms-web/stations/getstationspage?token=" + token,
          // url:'../api/ceshi.json',
          toolbar: "#toolbarDemo",
          parseData: function (res) {
            //res 即为原始返回的数据
            return {
              code: res.code, //解析接口状态
              msg: res.msg, //解析提示文本
              count: res.data.total, //解析数据长度
              data: res.data.list, //解析数据列表
            };
          },
          defaultToolbar: [
            "filter",
            "exports",
            "print",
            {
              title: "提示",
              layEvent: "LAYTABLE_TIPS",
              icon: "layui-icon-tips",
            },
          ],

          cols: [
            [
              { type: "numbers", width: 120, title: "序号", align: "center" },
              {
                field: "text",
                minWidth: 110,
                title: "站点名称",
                align: "center",
              },
              {
                title: "操作",
                width: 250,
                templet: "#currentTableBar",
                fixed: "right",
                align: "center",
              },
            ],
          ],
          limits: [10, 15, 20, 25, 50, 100],
          limit: 15,
          page: true,
          done: function (res) {
            if (res.code == -1) {
              window.location = "./login-1.html";
            }
            $("#Myloading").remove();
            // 表格渲染完成回调
          },
        });

        // 监听搜索操作
        form.on("submit(data-search-btn)", function (data) {
          // var result = JSON.stringify(data.field.username);
          // console.log(data);

          // layer.alert(result, {
          //     title: '最终的搜索信息'
          // });

          //执行搜索重载
          table.reload(
            "currentTableId",
            {
              //     page: {
              //         curr: 1
              //     }
              //     , where: {
              //         'text': result
              //     }
            },
            "data"
          );

          return false;
        });

        /**
         * toolbar监听事件
         */
        table.on("toolbar(currentTableFilter)", function (obj) {
          // 监听用户点击按钮 添加操作
          if (obj.event === "add") {
            // 控制弹框
            var index = layer.open({
              title: "添加用户",
              type: 2, //类型
              shade: 0.2, //透明度
              maxmin: true,
              shadeClose: true,
              area: ["100%", "100%"],
              content: "./table/add.html", //跳转地址
            });
            $(window).on("resize", function () {
              layer.full(index);
            });
          } else if (obj.event === "add_station") {
            var index = layer.open({
              title: "新增站点",
              type: 1,
              shade: 0.2,
              // maxmin:true,
              shadeClose: true,
              offset: ["150px"],
              skin: "layui-layer-molv",
              area: ["350px", "200px"],
              content:
                '<div style="margin-top:20px;"><p style="margin-bottom: 15px;margin-left: 5px;">站点名称：</p><input AUTOCOMPLETE="off" type="text" name="new_station" lay-verify="required" lay-reqtext="当前站点不能为空" placeholder="请输入站点名称"   class="layui-input"></div>',
              btn: ["确认"],
              yes: function (index, layero) {
                var station_name = $("input[name=new_station]")
                  .val()
                  .trim()
                  .replace(/\s/g, ""); //获取多行文本框的值
                // *************新增站点接口*******************//
                console.log(station_name, "stationName");
                if (station_name == "") {
                  layer.msg("站点名称不能为空");
                }
                if (station_name !== "") {
                  layer.confirm(
                    "确定新增该站点吗？",
                    {
                      btn: ["确定", "取消"], //按钮
                    },
                    function () {
                      $.ajax({
                        url:
                          "/oms-web/stations?token=" +
                          token +
                          "&station=" +
                          station_name,
                        dataType: "json",
                        type: "post",
                        contentType: "application/json",
                        success: function (data) {
                          if (data.code == -1) {
                            window.location = "./login-1.html";
                          }
                          if (data.code === 0) {
                            layer.close(index);
                            layer.msg(
                              "新增成功",
                              { icon: 1, time: 1000 },
                              function () {
                                window.location.reload();
                              }
                            );
                          } else {
                            layer.close(index);
                            layer.msg(data.msg, { icon: 1, time: 1000 });
                          }
                        },
                        error: function () {
                          layer.msg("数据请求错误！");
                          layer.close(index);
                        },
                      });
                    }
                  );
                }
              },
            });
          }
        });

        //监听表格复选框选择
        table.on("checkbox(currentTableFilter)", function (obj) {
          console.log(obj);
        });

        // 获取列表data
        table.on("tool(currentTableFilter)", function (obj) {
          // 2020-03-25 HF 保存接口需要参数 stationCode
          var station = obj.data;
          // var stationCode = obj.data.stationCode;
          sessionStorage.setItem("SaveStation", JSON.stringify(station));
          var data = obj.data;
          if (obj.event === "edit") {
            // 增加跳转路径
            $(this).attr("layuimini-content-href", "page/Hdevices.html");
          } else if (obj.event === "delete") {
            var alarmRequest = {
              Req: 1,
              stationCode: obj.data.stationCode,
            };
            sessionStorage.setItem("SaveRequest", JSON.stringify(alarmRequest));
            // layer.confirm('真的删除行么', function (index) {
            //     obj.del();
            //     layer.close(index);
            // });
          } else if (obj.event === "delete_station") {
            // 监听删除操作
            var station_code = obj.data.stationCode;
            // 用户操作确认提示
            layer.confirm(
              "确定删除该站点吗？",
              {
                btn: ["确定", "取消"], //按钮
              },
              function () {
                // 调用删除接口
                $.ajax({
                  url:
                    "/oms-web/stations/delete?token=" +
                    token +
                    "&stationCode=" +
                    station_code,
                  dataType: "json",
                  type: "post",
                  contentType: "application/json",
                  success: function (data) {
                    if (data.code == -1) {
                      window.location = "./login-1.html";
                    }
                    if (data.code === 0) {
                      // 关闭弹框 刷新页面
                      layer.closeAll();
                      layer.msg(
                        "删除成功！",
                        { icon: 1, time: 1000 },
                        function () {
                          window.location.reload();
                        }
                      );
                    } else {
                      layer.closeAll();
                      layer.msg(data.msg, { icon: 2, time: 1000 });
                    }
                  },
                  error: function () {
                    layer.msg("数据请求错误！");
                    layer.closeAll();
                  },
                });
              }
            );
          } else if (obj.event === "rename_station") {
            // 重明名设备
            // layui弹框
            var index = layer.open({
              title: "重命名站点",
              type: 1,
              shade: 0.2,
              // maxmin:true,
              shadeClose: true,
              offset: ["150px"],
              skin: "layui-layer-molv",
              area: ["350px", "200px"],
              // 拼接弹框内容
              content:
                '<div style="margin-top:20px;"><p style="margin-bottom: 15px;margin-left: 5px;">新站点名称：</p><input AUTOCOMPLETE="off" type="text" name="rename_station" lay-verify="required" lay-reqtext="当前站点不能为空" value="' +
                obj.data.text +
                '"  class="layui-input"></div>',
              btn: ["确认"],
              yes: function (index, layero) {
                var station_name = $("input[name=rename_station]")
                  .val()
                  .trim()
                  .replace(/\s/g, ""); //获取多行文本框的值
                // 检测是否名字重复
                if (obj.data.text == station_name) {
                  layer.msg("重命名重复！");
                  return;
                }
                // *************新增站点接口*******************//
                layer.confirm(
                  "确定修改该站点名吗？",
                  {
                    btn: ["确定", "取消"], //按钮
                  },
                  function () {
                    $.ajax({
                      url:
                        "/oms-web/stations/rename?token=" +
                        token +
                        "&station=" +
                        station_name +
                        "&code=" +
                        obj.data.stationCode,
                      dataType: "json",
                      type: "post",
                      contentType: "application/json",
                      success: function (data) {
                        if (data.code == -1) {
                          window.location = "./login-1.html";
                        }
                        if (data.code === 0) {
                          layer.close(index);
                          layer.msg(
                            "修改成功！",
                            { icon: 1, time: 1000 },
                            function () {
                              window.location.reload();
                            }
                          );
                        } else {
                          layer.close(index);
                          layer.msg(data.msg, { icon: 1, time: 1000 });
                        }
                      },
                      error: function () {
                        layer.msg("数据请求错误！");
                        layer.close(index);
                      },
                    });
                  }
                );
              },
            });
          }
        });
      });
    </script>
  </body>
</html>
